<template>
  <div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
    <div class="layout-view-bg-white">
      <div id="echartsMap" style="height: 100%"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, computed, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
 
import { useThemeConfigStateStore } from "@/stores/themeConfig";
import { useTagsViewRoutesStore } from "@/stores/tagsViewRoutes";
import { echartsMapList, echartsMapData } from "./mock";
export default {
  name: "funEchartsMap",
  setup() {
     
    const theme = useThemeConfigStateStore();
    const tagsViewRoutes = useTagsViewRoutesStore();
    const state = reactive({
      echartsMapList,
      echartsMapData,
    });
    // 设置主内容的高度
    const initTagViewHeight = computed(() => {
      let { isTagsview } = theme.themeConfig;
      let { isTagsViewCurrenFull } = tagsViewRoutes;
      if (isTagsViewCurrenFull) {
        return `30px`;
      } else {
        if (isTagsview) return `114px`;
        else return `80px`;
      }
    });
    // echartsMap 将坐标信息和对应物理量的值合在一起
    const convertData = (data) => {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let geoCoord = state.echartsMapData[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    // 初始化 echartsMap
    const initEchartsMap = () => {
      const myChart = echarts.init(document.getElementById("echartsMap"));
      const option = {
        tooltip: {
          trigger: "item",
        },
        color: ["#9a60b4", "#ea7ccc"],
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {},
        },
        series: [
          {
            name: "pm2.5",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(state.echartsMapList),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2,
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              state.echartsMapList
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
            ),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    };
    // 页面加载时
    onMounted(() => {
      initEchartsMap();
    });
    return {
      initTagViewHeight,
      ...toRefs(state),
    };
  },
};
</script>
